<template>
  <div>
    <main>
      <div class="top">
        <div class="photo"></div>
        <div class="word">
          <p class="one">Chovy</p>
          <p class="two">ID:438372615</p>
        </div>
        <div class="xian"></div>
        <div class="list">
          <ul>
            <li>红包</li>
            <li>218</li>
          </ul>
          <ul>
            <li>优惠券</li>
            <li>12张</li>
          </ul>
          <ul>
            <li>鲜豆</li>
            <li>88</li>
          </ul>
          <ul>
            <li>白条</li>
            <li>1000</li>
          </ul>
        </div>
      </div>
      <div class="mid">
        <div class="first">
          <van-icon name="bag" size="25" color="red" /><span>我的钱包</span
          ><van-icon name="arrow" class="a" />
        </div>
        <div class="second" @click="goAddress">
          <van-icon name="location" size="25" color="blue" /><span
            >我的地址</span
          ><van-icon name="arrow" class="a" />
        </div>
        <div class="third">
          <van-icon name="friends" size="25" color="purple" /><span
            >客服与帮助</span
          ><van-icon name="arrow" class="a" />
        </div>
      </div>
    </main>
    <!-- <docker /> -->
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let store = useStore();
let router = useRouter();

const back = () => {
  // 返回按钮
  // 更改back动画
  store.commit("changeRouterType", "back");
  router.push("/");
};

// 跳转我的地址
const goAddress = () => {
  router.push("/address");
};
</script>

<style lang="scss" scoped>
main {
  width: 100%;
  height: 100vh;
  background-color: #50c7fb;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  align-items: center;
  .top {
    width: 90%;
    height: 30%;
    box-shadow: 0 8px 16px 0;
    border-radius: 8px;
    background-color: #ffffff;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    .photo {
      width: 108px;
      height: 108px;
      border: 1px;
      border-radius: 50%;
      background-color: pink;
      position: absolute;
      top: -28%;
      left: 35%;
    }
    .word {
      margin-top: 0.4rem;
      .one {
        font-size: 24px;
      }
      .two {
        font-size: 14px;
        line-height: 0px;
        color: #c1c0c9;
      }
    }
    .xian {
      width: 99.5%;
      border: 1px solid #c1c0c9;
      margin-bottom: 10px;
    }
    .list {
      width: 100%;
      display: flex;
      justify-content: space-around;
      ul li:first-child {
        font-size: 12px;
        color: #c1c0c9;
        margin-bottom: 10px;
      }
      ul li:last-child {
        font-size: 20px;
      }
    }
  }
  .mid {
    width: 90%;
    height: 21.9%;
    box-shadow: 0 8px 16px 0;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 14px;
    .first {
      display: flex;
      align-items: center;
      width: 100%;
      height: 33.33%;
      .a {
        margin-left: 220px;
      }
    }
    .second {
      display: flex;
      align-items: center;
      width: 100%;
      height: 33.33%;
      .a {
        margin-left: 220px;
      }
    }
    .third {
      display: flex;
      align-items: center;
      width: 100%;
      height: 33.33%;
      .a {
        margin-left: 206px;
      }
    }
  }
}
</style>
